<template>
  <div>
    <!--    审批人节点-->
    <div v-if="processNode.type!=4 && processNode.type != 10 && processNode.type != 11 && processNode.type != -1"
         class="node-wrap"
    >
      <div class="node-wrap-box">
        <div>
          <div :style="'background: rgb('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][processNode.type] +');'"
               class="title"
          >
            <i v-show="processNode.type==1" class="el-icon-user" />
            <span v-if="processNode.type==0">{{ processNode.nodeName }}</span>
            <input v-if="processNode.type!=0&&isInput" v-model="processNode.nodeName" v-focus
                   :placeholder="placeholderList[processNode.type]" class="editable-title-input" type="text"
                   @blur="blurEvent()" @focus="$event.currentTarget.select()"
            >
            <span v-if="processNode.type!=0&&!isInput" class="editable-title"
                  @click="clickEvent()"
            >{{ processNode.nodeName }}</span>
            <i v-if="processNode.type!=0" class="icon el-icon-close close" @click="delNode()" />
          </div>
          <div class="content" @click="setPerson">
            <div v-if="processNode.type==0" class="text">
              所有人
            </div>
            <div v-if="processNode.type==1" class="text">
              <span v-if="!func.setApproverStr(processNode)" class="placeholder">请选择{{
                placeholderList[processNode.type]
              }}</span>
              {{ func.setApproverStr(processNode) }}
            </div>
            <div v-if="processNode.type==2" class="text">
              <span v-if="!func.copyerStr(processNode)" class="placeholder">请选择{{
                placeholderList[processNode.type]
              }}</span>
              {{ func.copyerStr(processNode) }}
            </div>
            <i class="el-icon-arrow-right arrow" />
          </div>
          <div v-if="isTried&&processNode.error" class="error_tip">
            <i class="el-icon-close" style="color: rgb(242, 86, 67);" />
          </div>
        </div>
      </div>

      <addNode :next-node-p.sync="processNode.nextNode" />
    </div>

    <div v-if="processNode.type==4" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm">
            添加条件
          </button>
          <div v-for="(item,index) in processNode.branchNodes" :key="index" class="col-box">
            <div class="condition-node">
              <div class="condition-node-box">
                <div :class="isTried&&item.error?'error active':''" class="auto-judge">
                  <div v-if="index!=0" class="sort-left" @click="arrTransfer(index,-1)">
                    &lt;
                  </div>
                  <div class="title-wrapper">
                    <input v-if="isInputList[index]" v-model="item.nodeName" v-focus
                           class="editable-title-input" type="text" @blur="blurEvent(index)"
                           @focus="$event.currentTarget.select()"
                    >
                    <span v-if="!isInputList[index]" class="editable-title" @click="clickEvent(index)">{{
                      item.nodeName
                    }}</span>
                    <span class="priority-title" @click="setPerson(index)">条件</span>
                    <i class="icon el-icon-close close" @click="delTerm(index)" />
                  </div>
                  <div v-if="index!=processNode.branchNodes.length-1" class="sort-right"
                       @click="arrTransfer(index)"
                  >
                    &gt;
                  </div>
                  <div class="content" @click="setPerson(index)">
                    {{ func.conditionStr(item, index) }}
                  </div>
                  <div v-if="isTried&&item.error" class="error_tip">
                    <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
                  </div>
                </div>
                <addNode :next-node-p.sync="item.nextNode" />
              </div>
            </div>
            <nodeWrap v-if="item.nextNode && item.nextNode && item.type !== -1"
                      :is-tried.sync="isTried"
                      :process-node.sync="item.nextNode"
            />
            <div v-if="index==0" class="top-left-cover-line" />
            <div v-if="index==0" class="bottom-left-cover-line" />
            <div v-if="index==processNode.branchNodes.length-1" class="top-right-cover-line" />
            <div v-if="index==processNode.branchNodes.length-1" class="bottom-right-cover-line" />
          </div>
        </div>
        <addNode :next-node-p.sync="processNode.nextNode" />
      </div>
    </div>

    <div v-if="processNode.type==10" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="parall">
            并行任务
          </button>
          <div v-for="(item,index) in processNode.branchNodes" :key="index" class="col-box">
            <div class="condition-node">
              <div class="condition-node-box">
                <addNode :next-node-p.sync="item.nextNode" :process-node.sync="item" />
              </div>
            </div>
            <nodeWrap v-if="item.nextNode && item.nextNode" :is-tried.sync="isTried"
                      :process-node.sync="item.nextNode"
            />
            <div v-if="index==0" class="top-left-cover-line" />
            <div v-if="index==0" class="bottom-left-cover-line" />
            <div v-if="index==processNode.branchNodes.length-1" class="top-right-cover-line" />
            <div v-if="index==processNode.branchNodes.length-1" class="bottom-right-cover-line" />
          </div>
        </div>
        <addNode :next-node-p.sync="processNode.nextNode.nextNode" :parent-node.sync="processNode.nextNode" />
      </div>
    </div>

    <nodeWrap v-if="processNode.nextNode && processNode.nextNode" :is-tried.sync="isTried"
              :process-node.sync="processNode.nextNode"
    />
  </div>
</template>
<script>
import addNode from "./addNode"
import func from "./preload"

export default {
  name: 'NodeWrap',
  components: {
    addNode
  },
  props: ["processNode", "isTried"],
  data() {
    return {
      func: func,
      placeholderList: ["发起人", "审核人", "抄送人"],
      isInputList: [],
      isInput: false
    }
  },
  computed: {
    approverConfig1() {
      return this.$store.state.workflow.approverConfig
    },
    copyerConfig1() {
      return this.$store.state.workflow.copyerConfig
    },
    conditionsConfig1() {
      return this.$store.state.workflow.conditionsConfig
    }
  },
  watch: {
    approverConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:processNode', data.value)
      }
    },
    copyerConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:processNode', data.value)
      }
    },
    conditionsConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:processNode', data.value)
      }
    }
  },
  mounted() {
  },
  methods: {
    clickEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, true)
      } else {
        this.isInput = true
      }
    },
    blurEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, false)
        this.processNode.branchNodes[index].nodeName = this.processNode.branchNodes[index].nodeName ? this.processNode.branchNodes[index].nodeName : "条件"
      } else {
        this.isInput = false
        this.processNode.nodeName = this.processNode.nodeName ? this.processNode.nodeName : this.placeholderList[this.processNode.type]
      }
    },
    delNode() {
      this.$emit("update:processNode", this.processNode.nextNode)
    },
    parall() {
      let len = this.processNode.branchNodes.length + 1
      this.processNode.branchNodes.push({
        //"nodeName": "条件" + len,
        "type": 4,
        "nodeType": "parallel",
        "nextNode": null
      })
      // for (var i = 0; i < this.processNode.branchNodes.length; i++) {
      //     this.processNode.branchNodes[i].error = this.conditionStr(this.processNode.branchNodes[i], i) == "请设置条件" && i != this.processNode.branchNodes.length - 1
      // }
      this.$emit("update:processNode", this.processNode)
    },
    addTerm() {
      let len = this.processNode.branchNodes.length + 1
      this.processNode.branchNodes.push({
        "nodeName": "条件" + len,
        "type": 3,
        "nextNode": null
      })
      this.$emit("update:processNode", this.processNode)
    },
    delTerm(index) {
      this.processNode.branchNodes.splice(index, 1)
      this.processNode.branchNodes.map((item, index) => {
        item.priorityLevel = index + 1
        item.nodeName = `条件${index + 1}`
      })
      this.$emit("update:processNode", this.processNode)
      if (this.processNode.branchNodes.length == 1) {
        if (this.processNode.nextNode) {
          if (this.processNode.branchNodes[0].nextNode) {
            this.reData(this.processNode.branchNodes[0].nextNode, this.processNode.nextNode)
          } else {
            this.processNode.branchNodes[0].nextNode = this.processNode.nextNode
          }
        }
        this.$emit("update:processNode", this.processNode.branchNodes[0].nextNode)
      }
    },
    reData(data, addData) {
      if (!data.nextNode) {
        data.nextNode = addData
      } else {
        this.reData(data.nextNode, addData)
      }
    },
    setPerson(index) {
      //  每个Vue实例都会有一个递增的id,可以通过this._uid获取
      let {type} = this.processNode
      // 审核人
      if (type === 1) {
        this.$store.commit('updateApprover', true)
        this.$store.commit('updateApproverConfig', {
          value: {
            ...JSON.parse(JSON.stringify(this.processNode)),
            ...{settype: this.processNode.settype ? this.processNode.settype : 1}
          },
          flag: false,
          id: this._uid
        })
      } else if (type === 2) {
        this.$store.commit('updateCopyer', true)
        this.$store.commit('updateCopyerConfig', {
          value: JSON.parse(JSON.stringify(this.processNode)),
          flag: false,
          id: this._uid
        })
      } else if (type === 4) {
        this.$store.commit('updateCondition', true)
        this.$store.commit('updateConditionsConfig', {
          value: JSON.parse(JSON.stringify(this.processNode)),
          index,
          flag: false,
          id: this._uid
        })
      }
    },
    arrTransfer(index, type = 1) {//向左-1,向右1
      this.processNode.branchNodes[index] = this.processNode.branchNodes.splice(index + type, 1, this.processNode.branchNodes[index])[0]
      this.processNode.branchNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      this.$emit("update:processNode", this.processNode)
    }
  }
}
</script>
<style scoped>
.error_tip {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(150%, 0px);
  font-size: 24px;
}


</style>
